<template>
  <div class="form-layout">
    <!--左侧导航-->
    <div class="nav-left">
      <customAnchor
        :itemList="[
          { name: 'box-base', title: '基础信息' },
          { name: 'box-status', title: '状态信息' },
          { name: 'box-flow', title: '流程信息' },
          { name: 'box-action', title: '操作信息' },
        ]"
      />
    </div>
    <!--表单区域-->
    <div class="form-right" ref="formRight">
      <customForm :data="form" :rules="propRules" ref="editForm" :disabled="propReadonly">
        <template #content>
          <div id="box-base" class="box-title">基础信息</div>
          <customFormItem label="按钮名称" name="title" :parent="_self" :form="form" />
          <customFormItem label="按钮标识" name="code" :parent="_self" :form="form" />
          <customFormItem label="按钮主题" name="type" :parent="_self" :form="form"
                          :type="constCommon.formItemType.selectStatic.name"
                          :config="{options: constCommon.themeList, label: 'label', value: 'value'}"
          />
          <customFormItem label="排序" name="sort" :parent="_self" :form="form"  :type="constCommon.formItemType.inputNumber.name" />
          <customFormItem label="图标" name="icon" :parent="_self" :form="form" />


          <div id="box-status" class="box-title">状态信息</div>
          <customFormItem label="显示状态值" name="valueIf" :parent="_self" :form="form" />
          <customFormItem label="操作完状态" name="valueTo" :parent="_self" :form="form" />

          <div id="box-flow" class="box-title">流程信息</div>
          <customFormItem label="流程开始" name="flagStart" :parent="_self" :form="form" :type="constCommon.formItemType.switch.name" />
          <customFormItem label="流程结束" name="flagEnd" :parent="_self" :form="form" :type="constCommon.formItemType.switch.name" />
          <customFormItem label="流程作废" name="flagClose" :parent="_self" :form="form" :type="constCommon.formItemType.switch.name" />

          <div id="box-action" class="box-title">操作信息</div>
          <customFormItem label="需要审批意见" name="flagComment" :parent="_self" :form="form" :type="constCommon.formItemType.switch.name" />
          <customFormItem label="批量操作" name="flagBatch" :parent="_self" :form="form" :type="constCommon.formItemType.switch.name" help='选中后，该按钮将显示到网格顶部操作区域'/>
          <customFormItem label="批量操作版本2" name="flagBatch2" :parent="_self" :form="form" :type="constCommon.formItemType.switch.name" help='选中后，将调用flow_change_batch方法，按钮显示条件还是以【批量操作】属性来'/>
          <customFormItem label="显示状态描述" name="valueIfTitle" :parent="_self" :form="form" help='批量操作时，进行校验提示'/>
          <customFormItem label="需要确认" name="flagConfirm" :parent="_self" :form="form" :type="constCommon.formItemType.switch.name" help='选中后，该流程按钮操作时需要提示用户确认' />
          <customFormItem label="确认提示" name="confirmMsg" :parent="_self" :form="form" full-width  help='提示用户确认信息内容，默认 【确认执行[button.title]么】' />
          <customFormItem label="提交并保存" name="flagSave" :parent="_self" :form="form" :type="constCommon.formItemType.switch.name" help='选中后，提交时将携带表单参数，先保存再提交流程' />
          <customFormItem label="备注" full-width name="remark" :parent="_self" :form="form" />

        </template>
      </customForm>
    </div>
  </div>
</template>

<script>
import customAnchor from '@/components/custom/form/customAnchor.vue'
import constCommon from '@/util/const/constCommon'

export default {
  data() {
    return {
      form: {},
      viewData: {},
    }
  },
  created() {
    let that = this
    this.$emit('event-register', {
      validate: (callback) => {
        return this.$refs.editForm.validate(callback)
      },
      beforeSave: () => {
        this.$emit('data-callback', this.form)
        return true
      },
      afterMove: (formData, initData) => {
        this.form = global.utils.jsonClone(formData)
        this.form.flowId = initData.id
        if (this.strings.isBlank(this.form.color)) {
          this.$set(this.form, 'color', '#000000')
        }
        this.$set(this.form, 'flagShowVfbAdd', this.form.flagShowVfbAdd == undefined ? true : this.form.flagShowVfbAdd)
        this.$set(this.form, 'flagShowVfbSave', this.form.flagShowVfbSave == undefined ? true : this.form.flagShowVfbSave)
        this.$set(this.form, 'flagShowVfbDelete', this.form.flagShowVfbDelete == undefined ? true : this.form.flagShowVfbDelete)
        this.$set(this.form, 'flagShowVrbEdit', this.form.flagShowVrbEdit == undefined ? true : this.form.flagShowVrbEdit)
        this.$set(this.form, 'flagShowVrbView', this.form.flagShowVrbView == undefined ? true : this.form.flagShowVrbView)
        this.$set(this.form, 'flagShowVrbDelete', this.form.flagShowVrbDelete == undefined ? true : this.form.flagShowVrbDelete)
        this.$set(this.form, 'flagShowVbAdd', this.form.flagShowVbAdd == undefined ? true : this.form.flagShowVbAdd)
        this.$set(this.form, 'flagShowVbRefresh', this.form.flagShowVbRefresh == undefined ? true : this.form.flagShowVbRefresh)
        this.$set(this.form, 'flagShowVbDelete', this.form.flagShowVbDelete == undefined ? true : this.form.flagShowVbDelete)
      },
      afterSave: () => {},
      beforeDelete: () => {
        return true
      },
      afterDelete: () => {},
      beforeFlow: (flowButtonKey) => {
        return true
      },
      afterFlow: (flowButtonKey) => {},
      beforeClose: () => {
        return true
      },
      afterClick() {},
    })
  },
  props: ['propPrimaryKey', 'propDictionaries', 'propCurrentRow', 'propViewFormData', 'propReadonly', 'propStatus', 'propRules', 'propInitData'],
  components: { customAnchor },
  computed: {
    constCommon() {
      return constCommon
    }
  },
  watch: {
    currentRow: {
      immediate: true,
      handler(newValue) {

      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .label-picker {
    display: inline-block;
    vertical-align: middle;
  }
</style>
